<template>
    <div>
        <el-table :data="rooms" style="width: 100%">
            <el-table-column prop="id" label="id" width="100"></el-table-column>
            <el-table-column prop="gender" label="性别" width="100"></el-table-column>
            <el-table-column prop="capacity" label="宿舍床位" width="100"></el-table-column>
            <el-table-column prop="dormitoryNumber" label="宿舍号" width="100"></el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <el-progress
                        :text-inside="true"
                        :stroke-width="26"
                        :percentage="scope.row.occupancy"
                    ></el-progress>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                    {{ scope.$index }}
                    <el-button @click="lookClick(scope.$index)" type="text" size="small">查看</el-button>
                    <el-button type="text" @click="editClick(scope.$index)" size="small">编辑</el-button>
                    <el-button type="text" @click="delClick(scope.$index)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="dialogFormVisibleAdd = true">增加宿舍</el-button>
        <el-button @click="assignRoomDialogVisible = true">分配宿舍</el-button>
       

       <el-dialog title="查看" :visible.sync="dialogFormVisible">
  <el-form :model="activeRoom" :disabled="true">
    <el-form-item label="宿舍号" :label-width="formLabelWidth">
      <el-input v-model="activeRoom.dormitoryNumber" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-select v-model="activeRoom.gender" >
        <el-option label="男" value="M"></el-option>
        <el-option label="女" value="F"></el-option>
      </el-select>
       <el-form-item label="宿舍床位" :label-width="formLabelWidth">
      <el-input v-model="activeRoom.capacity" autocomplete="off"></el-input>
    </el-form-item>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

  <el-dialog title="编辑" :visible.sync="dialogFormVisibleU">
  <el-form :model="eidtingRoom">
    <el-form-item label="宿舍号" :label-width="formLabelWidth">
      <el-input v-model="eidtingRoom.dormitoryNumber" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-select v-model="eidtingRoom.gender" >
        <el-option label="男" value="M"></el-option>
        <el-option label="女" value="F"></el-option>
      </el-select> 
       <el-form-item label="宿舍床位" :label-width="formLabelWidth">
      <el-input v-model="eidtingRoom.capacity" autocomplete="off"></el-input>
    </el-form-item>
    </el-form-item>
  </el-form>  
  <div slot="footer" class="dialog-footer">
    <el-button  @click="dialogFormVisibleU = false">取消奥</el-button>
    <el-button type="primary" @click=" updateRoom">确 定</el-button>
  </div>
</el-dialog> 

<el-dialog title="新增" :visible.sync="dialogFormVisibleAdd">
  <el-form :model="newRoom" >
    <el-form-item label="宿舍号" :label-width="formLabelWidth">
      <el-input v-model="newRoom.dormitoryNumber" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-select v-model="newRoom.gender" >
        <el-option label="男" value="M"></el-option>
        <el-option label="女" value="F"></el-option>
      </el-select>
       <el-form-item label="宿舍床位" :label-width="formLabelWidth">
      <el-input v-model="newRoom.capacity" autocomplete="off"></el-input>
    </el-form-item>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button  @click="dialogFormVisibleAdd = false">取消奥</el-button>
    <el-button type="primary" @click=" addClick">确 定</el-button>
  </div>
</el-dialog>
    </div>
</template>


<script>
import { roomsData, studentsData } from "../../../public/schoolData"

export default {
    data() {
        return {
            rooms:roomsData,
            students:studentsData,
            handleIndex:-1,
            formLabelWidth:"100px",
            dialogFormVisible:false,
            dialogFormVisibleU:false,
            dialogFormVisibleAdd:false,
            eidtingRoom:{},
            newRoom:{
                id: "",
                 dormitoryNumber: '',
                  capacity: "",
                   gender: '',
                    students: [] 
            }
        }
    },

    computed: {
        activeRoom(){
            return this.handleIndex>=0? this.rooms[this.handleIndex]:{}
        }
    },

    methods: {
        lookClick(index){
            this.handleIndex=index
            this.dialogFormVisible=true
        },

         editClick(index){
            this.handleIndex=index
            this.dialogFormVisibleU=true
            this.eidtingRoom={...this.activeRoom}
        },

        updateRoom(){
            this.rooms=this.rooms.map((room,index)=>{
                return this.handleIndex==index? this.eidtingRoom :room
            })
            this.dialogFormVisibleU=false

        },

        delClick(index){
            this.rooms.splice(index,1)
        },

        addClick(){
            this.rooms.push({...this.newRoom,id:Date.now()})
            this.dialogFormVisibleAdd=false

        }

    },


}
</script>
<style>
/* .del
/* .del {
    letter-spacing: 12px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    color: #606266;
    font-size: 19px;
    word-break: break-all;
} */
